<template>
	<view @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" class="container">
		<!-- @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" -->
		<!--<web-view :src="url"></web-view> -->
		<view class="videotitle">左右滑动 切换视频</view>
		<video id="myVideo" :src="url" :enable-progress-gesture="false" :autoplay="true" :loop="false" :show-center-play-btn="false" @play="onPlay" @pause="onPause" @ended="onVideoend" class="myVideo"></video>
	</view>
</template>

<script>
	let touchDot = 0;
	let tMove = 0;
	let time = 0;
	let interval = -1;
	let isplay = true;
	let videoindex = 0;
	let videonames = ["","","","","","","","","","","","","","","","","","","",""];
	export default {
		data() {
			return {
				url: '',
				videoContext: null,
				videocount: 0,
			}
		},
		onLoad(e) {
			this.videocount = 0;
			videoindex = 0;
			if (e.data){
				// 获取查询参数中的 JSON 字符串
			    let jsonString = decodeURIComponent(e.data);
			    // 反序列化为对象
			    let videoObj = JSON.parse(jsonString);
					
				if (videoObj && videoObj.length > 0) {
					for(var i = 0; i < videoObj.length; i++)
						if(videoObj[i]){
							videonames[this.videocount] = videoObj[i];
							this.videocount += 1;
						}
				
					this.url = videonames[0];
					this.videoContext = uni.createVideoContext('myVideo');
				}
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo');
		},
		onShow(){
			if (this.videoContext)
				this.videoContext.play();
		},
		onHide(){
			if (this.videoContext)
				this.videoContext.pause();
		},		
		methods: {
		  // 触摸开始事件 
		  touchStart(e) {
			if (e.touches.length == 1) {
				touchDot = e.touches[0].clientX; // 获取触摸时的原点 
				tMove = touchDot;
			}
			  
			// 使用js计时器记录时间  
			//interval = setInterval(function () {
			//	time++;
			//}, 100);
		  },
		  // 触摸移动事件 
		  touchMove(e) {
			// console.log(e)
			if (e.touches.length == 1) {
				tMove = e.touches[0].clientX;
			}
		  },
		  // 触摸结束事件 
		  touchEnd(e) {
			  //console.log("touchMove:" + tMove + " touchDot:" + touchDot + " diff:" + (tMove - touchDot));
			  // 向左滑动  
			  if (tMove - touchDot <= -40 ) {
				console.log('向左滑动')
				if (this.videoContext){
					console.log('向左切换视频');
					if(videoindex >= (this.videocount-1))
					   videoindex = -1;
					
					videoindex += 1;
					
					this.videoContext.stop();						
					this.url = videonames[videoindex];
					this.videoContext.play();
				}
			  }
			  // 向右滑动 
			  else if (tMove - touchDot >= 40 ) {
				console.log('向右滑动');
				if (this.videoContext){
					console.log('向右切换视频');
					if(videoindex <= 0)
					   videoindex = this.videocount;
					   
					videoindex -= 1;
					
					this.videoContext.stop();
					this.url = videonames[videoindex];
					this.videoContext.play();
				}
			  }
			  else{
				  if (this.videoContext){
					  if(isplay){
						 this.videoContext.pause();
					  }
					  else{
						 this.videoContext.play();
					  }
				  }
			  }
			  
			  //if(interval != -1){
			  //	clearInterval(interval); // 清除setInterval 
			  //	time = 0;
			  //}
		  },
		  onPlay(e){
			 isplay = true;
		  },
		  onPause(e){
			 isplay = false;
		  },
		  onVideoend(e){			  
			 if (this.videoContext && videoindex < (this.videocount - 1)){
				videoindex += 1;
				this.url = videonames[videoindex];
				this.videoContext.play();
			 }
		  },
		}
	}
</script>

<style>
	.videotitle{
		font-size: 16;
		color: whitesmoke;
		justify-content: center; /**内容居中*/
		padding-bottom: 30px;
	}
	.container{
		display: flex;    /*设置显示样式**/
		align-items: center;    /**子view垂直居中*/
		vertical-align: center; /**垂直居中*/
		justify-content: center; /**内容居中*/
		flex-direction:column; /**子view排列方式row--水平 column--垂直*/
		background-color: #1f1c1c;
		width: 100%;
		height: 100%;
	}
	.myVideo{
		width:100%; 
	}
</style>
